/**
 * Popup plugin
 * @param {Object} params
 */
(function($) {
    if ( $.popup ) return this;

    $.extend({
        popup: function(elm, offset_top, close_callback) {
            var element = elm;

            if ( $.isFunction(offset_top) )
            {
                close_callback = offset_top;
                offset_top     = null;
            }

            try {
                $('[flag=dragBar], .draggable', element).drag();
            } catch(ex) {}

            $(element).css('margin', 0);

            var showing = false;

            var OFFSET_TOP = parseInt(offset_top) || 100;           // 弹出框到顶部距离，单位：px

            var mask = $('<div></div>')
                                .css('position', 'absolute')
                                .css('top', 0)
                                .css('left', 0)
                                .css('z-index', 11)
                                .css('width', '100%')
                                .css('height', '100%')
                                .css('background-color', '#333')
                                .css('opacity', 0.8)
                                .hide()
                                .appendTo(document.body);
            var popup_container = $('<div></div>')
                                .css('position', 'absolute')
                                .css('z-index', 12)
                                .css('left', '50%')
                                .css('top', 0)
                                .css('margin-left', 0)
                                .hide()
                                .appendTo(document.body);

            var show_mask = function() {
                mask.css('width', $(document).width())
                    .css('height', $(document).height())
                    .show();
                return this;
            };
            var hide_mask = function() {
                mask.hide();
                return this;
            };
            var hide_popup = function() {
                $('> div', popup_container).hide().appendTo(document.body);
                hide_mask();

                showing = false;
                return this;
            };
            var show_popup = function(element) {
                show_mask();
                $('> div', popup_container).hide().appendTo(document.body);
                var W = $(element).outerWidth();
                popup_container.append($(element).show())
                                  .appendTo(document.body)
                                  .css('top', OFFSET_TOP + $(document).scrollTop())
                                  .css('margin-left', -W/2)
                                  .fadeIn('fast');
                showing = true;
                return this;
            };

            var wrapper = $(element);
            wrapper.show = function() {
                show_mask();
                show_popup(element);
                $('form input', element).eq(0).focus();
                $('.error_msg', element).html('');
                return wrapper;
            };

            wrapper.hide = function() {
                hide_mask();
                hide_popup();

                close_callback && close_callback(wrapper);

                return wrapper;
            };

            wrapper.toggle = function() {
                if ( showing ) {
                    wrapper.hide();
                } else {
                    wrapper.show();
                }
                return wrapper;
            };

            $('.close, #close, [rel=close]', element).click(function(e) {
                e.preventDefault();
                wrapper.hide();
            });

            return wrapper;
        }
    });
})(jQuery);
